/**
 * @Author:高志斐
 * @Date:2020/7/5
 * @Description:这是提现页面
 */
import React,{Component} from "react";
import {Button, Icon, InputItem, List, NavBar, WhiteSpace, WingBlank, Radio, Toast} from "antd-mobile";
import axios from "axios";
import {URL} from "../../index";
import {getCookieId} from "../Login/Component_Login/GetCookie";
const RadioItem = Radio.RadioItem;
export default class WithDraw extends Component{
    constructor(props) {
        super(props);
        this.state = {
            bankAccountList:[],//请求返回的银行卡数组
            bankCard:'',//选择的银行卡号
            withDrawMoney:0,//提现金额
            payPassword:''//支付密码
        };
        this.handleLeftClick=this.handleLeftClick.bind(this)
        this.loadBankCard=this.loadBankCard.bind(this)
        this.withDraw=this.withDraw.bind(this)
    }

    handleLeftClick(event){
        window.history.back(-1)
    }
    componentDidMount() {
        this.loadBankCard()
    }
    //加载用户已绑定的银行卡
    loadBankCard(){
        //请求数据
        axios({
            method:"GET",
            url: URL + "/bankAccount/bankAccountInfo",
            params: {
                userId:getCookieId()
            }
        }).then(
            (res)=>{
                this.setState({
                    bankAccountList:this.state.bankAccountList.concat(res.data.bankAccountList)
                })
            }
        ).catch(function (error) {
            console.log(error);
        })
    }
    onChange = (value) => {
        // 修改state里的银行卡号
        this.setState({
            bankCard: value
        });
    };
    onChangeMoney = (withDrawMoney) => {
        this.setState({
            withDrawMoney
        })
    }
    onChangePassword = (payPassword) => {
        this.setState({
            payPassword
        })
    }
    //提现方法
    withDraw(){
        if (this.state.bankCard === "") {
            Toast.info("请选择银行卡")
        }else if(this.state.withDrawMoney <= 0){
            Toast.info("请输入提现金额")
        }else if(this.state.payPassword === ""){
            Toast.info("请输入支付密码")
        }else if(this.state.payPassword.length !== 6){
            Toast.info("支付密码为6位，位数不对！")
        }else {
            // console.log(typeof Number(this.state.chargeMoney))
            axios({
                    method: "POST",
                    url:URL + "/bankAccount/withdraw",
                    data:{
                        userId: getCookieId(),  // 用户id
                        tradeMoney:Number(this.state.withDrawMoney),
                        bankAccountCard: this.state.bankCard,
                        userPassword:this.state.payPassword
                    }
                }
            ).then(res => {
                if (res.data.code === 200) {
                    Toast.success('提现成功');
                    // 路由
                    this.props.history.push("/wallet")
                } else {
                    Toast.fail('提现失败', 2);
                }
            })
        }
    }
    render() {
        return(
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" style={{color:"#f8a83f"}}/>}
                    onLeftClick={this.handleLeftClick}
                >提现</NavBar>
                <WingBlank size="lg">
                    <List renderHeader={() => '选择提现银行卡'}>
                        {this.state.bankAccountList.map((item,index) => (
                            <RadioItem
                                key={index}
                                checked={this.state.bankCard === item.bankAccountCard}
                                onChange={() => this.onChange(item.bankAccountCard)}>
                                {item.accountBankName}<List.Item.Brief>{"**** **** **** " + item.bankAccountCard.substring(item.bankAccountCard.length-4)}</List.Item.Brief>
                            </RadioItem>
                        ))}
                    </List>
                </WingBlank>
                <WingBlank size="lg">
                    <List renderHeader={() => '提现金额'}>
                        <InputItem
                            type="money"
                            placeholder="请输入提现金额"
                            clear
                            moneyKeyboardAlign="left"
                            value={this.state.withDrawMoney}
                            onChange={this.onChangeMoney}
                        >￥</InputItem>
                    </List>
                </WingBlank>
                <WingBlank size="lg">
                    <List renderHeader={() => '支付密码'}>
                        <InputItem
                            type="password"
                            placeholder="请输入6位支付密码"
                            clear
                            moneyKeyboardAlign="left"
                            value={this.state.payPassword}
                            onChange={this.onChangePassword}
                        >支付密码</InputItem>
                    </List>
                </WingBlank>
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
                <div className='wallet-num-container'>
                    <WingBlank size="lg">
                    <Button
                        style={{display: 'block', margin: '0 auto', backgroundColor: '#f8a83f', color: '#FFFFFF'}}
                        onClick={this.withDraw}
                    >
                        提现
                    </Button>
                    </WingBlank>
                </div>
            </div>
        );
    }
}
